<template>
    <div class="home">
        <!-- 二级路由坑 -->
        <router-view v-if="$route.path === '/home/searchPopup'"></router-view>
        <main v-else>
            <!--搜索框 -->
            <van-search
                shape="round"
                v-model="value"
                show-action
                placeholder="请输入搜索关键词"
                @search="onSearch"
                @cancel="onCancel"
                @click="$router.push('/home/searchPopup')"
            />

            <!-- 轮播图 -->
            <SwiperCom :banner="banner"></SwiperCom>

            <!-- grid 居家-志趣组件 -->
            <Grid :channel="channel"></Grid>

            <!-- 品牌制造商直供  -->
            <Support :brandList="brandList"></Support>

            <!-- 周一周四新品首发 -->
            <Weekproduct
                :newGoodsList="newGoodsList"
                title="周一周四新品首发"
            ></Weekproduct>

            <!-- 人气推荐 top组件 -->
            <!-- v-if 保证了有数据才渲染该组件，等渲染该组件的时候，才执行该组件的生命周期函数-->
            <Top :hotGoodsList="hotGoodsList" v-if="hotGoodsList.length>0"></Top>

            <!-- 专题精选 -->
            <TopicBox :topicList="topicList" title="专题精选"></TopicBox>

            <!-- 产品列表 -->
            <Weekproduct
                v-for="item in categoryList"
                :key="item.id"
                :newGoodsList="item.goodsList"
                :title="item.name"
            >
            </Weekproduct>
        </main>
    </div>
</template>

<script>
// 导入轮播图组件
import SwiperCom from "@/components/SwiperCom";
import { getIndexList } from "@/https/http.js";
// 引入 grid  居家-志趣组件
import Grid from "@/views/home/Grid";
// 引入support 组件-品牌制造商直供
import Support from "@/views/home/Support";
import Weekproduct from "@/views/home/Weekproduct";
import TopicBox from "@/views/home/TopicBox";
import Top from '@/views/home/Top'
export default {
    name: "home",
    data() {
        return {
            value: "",
            banner: [],  //轮播图
            channel: [],  //居家-志趣数据
            brandList: [],  // 品牌制造商数据
            newGoodsList: [],  // 周一周四新品首发数据
            hotGoodsList:[],  // 人气推荐
            topicList: [],  // 专题精选
            categoryList: []  //产品列表
        };
    },

    components: {
        SwiperCom,
        Grid,
        Support,
        Weekproduct,
        TopicBox,
        Top,
    },
    created() {
        // 发送请求，获取数据
        getIndexList().then((res) => {
            console.log("res", res);
            this.banner = res.data.banner;
            this.channel = res.data.channel;
            this.brandList = res.data.brandList;
            this.newGoodsList = res.data.newGoodsList;
            this.topicList = res.data.topicList;
            this.categoryList = res.data.categoryList;
            this.hotGoodsList = res.data.hotGoodsList;
        });
    },
    methods: {
        onSearch() { },
        onCancel() { },
    },
};
</script>

<style lang="less" scoped>
.home {
    padding-bottom: 100px;
    box-sizing: border-box;
}
</style>